<template>
  <div class='upload-container'>
    <a-upload
      :name='name'
      :class="{'uploadHide': isState==='detail'}"
      :disabled='disabled'
      :list-type='fileListType'
      :multiple='multiple'
      :showUploadList='{
			  showPreviewIcon: isShowPreviewIcon,
			  showRemoveIcon: isShowRemoveIcon,
			  showDownloadIcon: isShowDownloadIcon
			}'
      :openFileDialogOnClick='true'
      :file-list='fileList'
      :data='data'
      :action='uploadUrl'
      :before-upload='beforeUpload'
      @change='handleChange'
      @download='handleDownload'
    >
      <a-button class='ClassA'>
        <a-icon type="upload" />
        上传
      </a-button>
      <span  v-if="isDownload" class="download" @click.stop="handleDownload">下载模板</span>
    </a-upload>
    <div>
      <span>支持 {{ acceptHint }} 文件格式，最大不超过 {{ size }} M</span>
    </div>
  </div>
</template>

<script>

export default {
  name: 'upload-plus',
  props: {
    // 传参数属性名
    name: {
      type: String,
      default: () => {
        return 'files';
      },
    },
    // 上传文件名长度限制
    fileNameLength: {
      type: Number,
      default: () => {
        return 200;
      },
    },
    // 上传文件状态 [detail(只读状态)、opera(操作状态)]
    // detail(只读状态，必不显示删除按钮，仅显示查看和下载按钮)
    isState: {
      type: String,
      default: () => {
        return 'opera';
      },
    },
    // 是否禁用附件上传
    disabled: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    // 是否允许上传多个文件
    multiple: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    // 是否允许下载
    isDownload: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    // 限制文件上传个数
    limit: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    // 允许上传的文件类型提示
    accept: {
      type: Array,
      default: () => {
        return ['doc', 'docx', 'xls', 'xlsx', 'jpg', 'jpeg', 'png', 'pdf', 'txt'];
      },
    },
    // 允许上传的文件大小提示(MB为单位)
    size: {
      type: Number,
      default: () => {
        return 200;
      },
    },
    // 上传列表内建样式
    fileListType: {
      type: String,
      default: () => {
        return 'text';
      },
    },
    // 是否显示预览图表
    showPreviewIcon: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 是否显示删除图表
    showRemoveIcon: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 是否显示下载图表
    showDownloadIcon: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 文件列表
    fileList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 数据
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 上传文件的Url
    uploadUrl: {
      type: String,
      default: () => {
        return '';
      },
    },
  },
  data() {
    return {
      // 文件请求头
      headers: {
      },
    };
  },
  computed: {
    // 返回文件提示信息
    acceptHint() {
      if (this.accept.length === 0) {
        return '未知';
      } else {
        if (this.accept.indexOf('*') === -1) {
          return this.accept.join('、');
        } else {
          return '所有';
        }
      }
    },

    // 是否启用文件预览按钮
    isShowPreviewIcon() {
      return this.showPreviewIcon;
    },

    // 是否启用文件下载按钮
    isShowDownloadIcon() {
      return this.showDownloadIcon;
      // return true;
    },

    // 是否启用文件删除按钮
    isShowRemoveIcon() {
      if (this.showRemoveIcon && this.isState !== 'detail') {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    /**
     * 上传文件前触发
     * @param {Object} file 文件数据
     */
    beforeUpload(file) {

      // 文件名校验
      if (file.name.substring(0, file.name.indexOf('.')).length > this.fileNameLength) {
        this.$message.error(`上传文件名字不得超过${this.fileNameLength}字`);
        return false;
      }

      // 文件类型校验
      let fileExt = file.name.slice(file.name.lastIndexOf('.') + 1);
      if (this.accept.indexOf(fileExt) === -1) {
        this.$message.error('禁止上传非法的文件类型');
        return false;
      }

      // 文件大小校验
      let fileSize = file.size / 1024 / 1024;
      if (fileSize > this.size) {
        this.$message.error('只允许上传' + this.size + 'M一下的文件');
        return false;
      }

      return true;
    },

    /**
     * 上传文件改变触发
     * @param {Object} info 文件信息
     * */
    handleChange(info) {
      let fileList = [...info.fileList].filter(item => {
        return item.status !== undefined;
      });
      // 限制文件上传数量，新的文件会替换掉旧的文件
      if (this.limit !== 0) {
        fileList = fileList.slice(-this.limit);
      }
      // 2. read from response and show file link
      fileList = fileList.map(file => {
        if (file.response) {
          file.url = file.response.url;
        }
        return file;
      });
      this.$emit('update:fileList', fileList);
      this.$emit('change', info);// 封装组件新增方法
    },


    /**
     * 文件下载回调
     * @param {Object} file 文件
     * */
    handleDownload(file) {
    this.$emit('download', file)
    },
  },
};
</script>

<style lang='less' scoped>
/deep/ .anticon-paper-clip, /deep/ .ant-upload-list-item-name {
  height: 28px;
  font-size: 18px;
  color: #2377ff;
}

/deep/ .ant-upload {
  display: flex;
}

.download {
  color: #2377ff;
  line-height: 40px;
  margin-left: 10px;
}

.btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}

.upload-accept {
  font-size: 1em;
  color: gray;
}
</style>
